<template>
	<view class="page-height">
		<i-top-bar :title="title"> </i-top-bar>
		<view class="page-content" v-if="detail.id">

			<view class="form-view">
				<view class="form-item">
					<text class="label">产品名称</text>
					<view class="right">
						<input type="text" :value="detail.product_name" placeholder="请输入" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label">序列号</text>
					<view class="right">
						<input type="text" :value="detail.product_code" placeholder="请输入" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label">故障描述</text>
					<view class="right-textarea">
						<textarea :value="detail.user_content" auto-height placeholder="请输入" class="textarea" disabled></textarea>
					</view>
				</view>
				<view class="form-item" v-if="detail.remarks">
					<text class="label">备注</text>
					<view class="right-textarea">
						<textarea :value="detail.remarks" auto-height placeholder="请输入" class="textarea" disabled></textarea>
					</view>
				</view>

			</view>


			<view class="form-view">
				<view class="form-item">
					<text class="label">购买渠道</text>
					<view class="right">
						<input type="text" :value="detail.channel_name" placeholder="请选择" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label" style="width: 230rpx;">实际购买店铺名称</text>
					<view class="right">
						<input type="text" :value="detail.shop_name" placeholder="无" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label" style="width: 180rpx;">实际购买时间</text>
					<view class="right">
						<input type="text" :value="formatTime(detail.real_pay_time,'Y-M-D')" placeholder="请选择" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label">订单编号</text>
					<view class="right">
						<input type="text" :value="detail.order_code" placeholder="无" class="input" disabled />
					</view>
				</view>
				<view class="form-item">
					<text class="label">订单截图</text>
					<view class="right-images">
						<view class="image-item">
							<image :src="getImageSrc(detail.order_image)" mode="aspectFill" class="image" @click="showImg([getImageSrc(detail.order_image)])"></image>
						</view>

					</view>
				</view>
			</view>


			<view class="upload-images" v-if="images.length">
				<text class="image-title">图片</text>
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="image-list">
						<view class="image-item" v-for="(item,index) in images" :key="index">
							<image :src="getImageSrc(item)" mode="aspectFill" class="img" @click="showImg([item],0)" v-if="getFileType(item) ==='image'"></image>
							<image src="@/static/images/video.png" mode="aspectFill" class="img" v-if="getFileType(item) ==='video'" @click="openVideo(item)"></image>
						</view>
					</view>
				</scroll-view>
			</view>



			<view class="address-view">
				<text class="address-title">地址</text>
				<view class="address-info">
					<text class="address-text">{{detail.res_receiver}} {{detail.res_mobile}}</text>
					<text class="address-text">{{detail.res_address}}</text>
				</view>
			</view>

			<view class="text-view" v-if="detail.status == 2 && detail.reject">
				<view class="text-title-line">
					<text class="text-title">驳回原因</text>
				</view>
				<view class="text-info">
					<text class="text">{{detail.reject}}</text>
				</view>
			</view>

			<view class="text-view" v-if="detail.status >= 3">
				<view class="text-title-line">
					<text class="text-title">维修部地址</text>
					<text class="text-tips">请按照维修部地址寄出产品</text>
				</view>
				<view class="text-info" @click="onCopyAddress()">
					<view class="left">
						<text class="text">{{detail.factory_name}} {{detail.factory_phone}}</text>
						<text class="text">{{detail.factory_address}}</text>
					</view>
					<image src="@/static/images/copy.png" class="copy"></image>
				</view>
			</view>

			<view class="text-view" v-if="detail.status > 3">
				<view class="text-title-line">
					<text class="text-title">售后运单号</text>
				</view>
				<view class="text-info" @click="copy(detail.user_shipper_code)">
					<view class="left">
						<text class="text">{{detail.user_shipper_name || '--'}}</text>
						<text class="text">{{detail.user_shipper_code || '--'}}</text>
					</view>
					<image src="@/static/images/copy.png" class="copy"></image>
				</view>
			</view>

			<view class="text-view" v-if="detail.status > 6 && detail.damage_reason === '非质量问题'">
				<view class="text-title-line">
					<text class="text-title">检测结果</text>
				</view>
				<view class="text-info">
					<text class="text">{{detail.problem || detail.damage_reason}}</text>
				</view>
			</view>

			<!-- 	<view class="text-view" v-if="detail.sales_status">
				<view class="text-title-line">
					<text class="text-title">售后客服确认维修状态</text>
				</view>
				<view class="text-info">
					<text class="text">{{detail.sales_status}}</text>
				</view>
			</view> -->

			<!-- 费用说明 -->

			<!-- <view class="text-view" v-if="detail.status > 7 && detail.cost_content">
				<view class="text-title-line">
					<text class="text-title">费用说明</text>
				</view>
				<view class="text-info">
					<text class="text">{{detail.cost_content}}</text>
				</view>
			</view> -->

			<!-- 售后服务费 -->
			<view class="cost-view" v-if="detail.status == 7">
				<view class="cost-title">
					<text class="text">售后服务费</text>
					<text class="text">{{detail.real_cost}}元</text>

					<text class="fee" v-if="detail.cost_content" @click="$refs.fee_desp.show(detail.cost_content)">费用说明</text>
					<i-icon name="iconfont-icon-jinrujiantouxiao" color="#666666" size="24rpx" v-if="detail.cost_content" @click="$refs.fee_desp.show(detail.cost_content)"></i-icon>
				</view>
				<view class="cost-col">
					<image :src="getImageSrc(detail.sales_image)" mode="widthFix" class="code-img" @click="showImg([getImageSrc(detail.sales_image)])"></image>
					<text class="text">请扫描二维码支付</text>
					<text class="text">支付完成后截图付款页面</text>
				</view>
			</view>
			<view class="cost-view" v-if="detail.status > 7">

				<view class="cost-title" v-if="detail.real_cost > 0">
					<text class="text">售后服务费</text>
					<text class="text">{{detail.real_cost}}元</text>
					<text class="fee" v-if="detail.cost_content" @click="$refs.fee_desp.show(detail.cost_content)">费用说明</text>
					<i-icon name="iconfont-icon-jinrujiantouxiao" color="#666666" size="24rpx" v-if="detail.cost_content" @click="$refs.fee_desp.show(detail.cost_content)"></i-icon>
				</view>
				<view class="cost-title" v-else>
					<text class="text">售后服务费</text>
					<text class="text">无费用</text>
				</view>
				<view class="cost-row" v-if="detail.voucher">
					<text class="label">费用凭证</text>
					<view class="image-view">
						<image :src="getImageSrc(detail.voucher)" mode="aspectFill" class="image" @click="showImg([getImageSrc(detail.voucher)])"></image>
					</view>
				</view>
				<!-- 寄回运单号 -->
				<view class="back-yundan" v-if="detail.status > 9">
					<text class="title">寄回运单号</text>
					<view class="text-info" @click="copy(detail.admin_shipper_code)">
						<view class="left">
							<text class="text">{{detail.admin_shipper_name || "--"}}</text>
							<text class="text">{{detail.admin_shipper_code || "--"}}</text>
						</view>
						<image src="@/static/images/copy.png" class="copy"></image>
					</view>
				</view>

				<!-- 我的评价 -->
				<view class="pingjia" v-if="false">
					<text class="label">我的评价</text>
					<u-rate :count="5" :value="4" inactiveColor="#E6E6E6" activeColor="#FFCC18" size="40rpx" readonly activeIcon="star-fill" inactiveIcon="star-fill"></u-rate>
				</view>
			</view>
			<view class="btn-view-pla" v-if="show_btn"></view>
			<view class="btn-view" v-if="show_btn">
				<button class="btn btn-01" @click="onViewReport()" v-if="detail.status > 6">查看检测报告</button>
				<!-- <button class="btn" @click="$refs.submit_reat.show(id)" v-if="detail.status == 10">评价工单</button> -->
				<button class="btn" @click="$refs.pay_image_upload.show(id)" v-if="detail.status == 7">上传凭证</button>
				<button class="btn" @click="onWaybillInput(id)" v-if="detail.status == 3">填写运单号</button>
				<button class="btn" style="width: 100%;" @click="onEditOrder()" v-if="detail.status == 2">重新提交</button>

			</view>


		</view>
		<u-toast ref="uToast"></u-toast>
		<i-toast ref="iToast"></i-toast>
		<!-- 检测报告 -->
		<check-report ref="check_report"></check-report>

		<!-- 费用说明 -->
		<fee-desp ref="fee_desp"></fee-desp>
		<!-- 运单填写 -->
		<waybill-input ref="waybill_input" type="detail" @success="waybillInputSuccess()"></waybill-input>

		<!-- 上传费用凭证 -->
		<pay-image-upload ref="pay_image_upload" @seccess="getDetail()"></pay-image-upload>

		<!-- 评价工单 -->
		<submit-reat ref="submit_reat" @seccess="getDetail()"></submit-reat>
	</view>
</template>
<script>
	import CheckReport from "./components/check-report.vue"
	import FeeDesp from "./components/fee-desp.vue" //费用说明
	import WaybillInput from "./components/waybill-input.vue" //运单填写
	import PayImageUpload from "./components/pay-image-upload.vue" //上传费用凭证
	import SubmitReat from "./components/submit-reat.vue" //评价工单
	export default {
		components: { CheckReport, FeeDesp, WaybillInput, PayImageUpload, SubmitReat },
		data() {
			return {
				title: "工单详情",
				id: null,
				status: null,
				address: {
					id: null
				},
				order_image: "",
				image_list: ['', '', '', '', '', '', '', '', ''],
				remarks: "",
				detail: {
					id: null
				},
				images: [],
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		computed: {
			show_btn: function() {
				if (this.detail.status > 6) return true
				if (this.detail.status == 10) return true
				if (this.detail.status == 7) return true
				if (this.detail.status == 3) return true
				if (this.detail.status == 2) return true
				return false
			}
		},
		methods: {
			getDetail() {
				const params = {
					id: this.id
				}
				this.api.post("/api/work/workDetails", { params: params }).then(res => {
					console.log(res);
					this.detail = res
					this.images = res.image ? res.image.split(',') : [];
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},


			onViewReport() {
				this.$refs.check_report.show(this.detail.detection_content)
			},
			onCopyAddress() {
				const str = `${this.detail.factory_name} ${String(this.detail.factory_phone)} ${this.detail.factory_address}`
				this.copy(str)
			},
			//打开视频
			openVideo(src) {
				this.openWin(`/pages/order/video?src=${src}`)
			},
			onWaybillInput(id) {

				uni.showModal({
					content: "寄回时请写一张小纸条（姓名、电话、地址、问题）如没有，不利于工程师排查。\r\n请单独邮寄商品，配件一律不要寄回，如:盒子、保护套、数据线等，以免配件丢失！如出现丢失,责任自付。",
					success: (e) => {
						if (e.confirm) {
							this.$refs.waybill_input.show(id)
						}
					}
				})
			},
			onEditOrder() {
				this.openWin(`add-order?id=${this.id}`)
			},
			waybillInputSuccess() {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					this.getDetail()
				} else {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		margin-bottom: 20rpx;
	}

	.title-line {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.title-sub {
			font-size: 20rpx;
			color: #666666;
			margin-left: 16rpx;
		}
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx;
		margin-top: 10rpx;

		.form-item {
			display: flex;
			border-bottom: 1px solid #E5E5E5;
			padding: 24rpx 0;



			.label {
				line-height: 66rpx;
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				height: 66rpx;
				padding-left: 24rpx;

				.input {
					flex: 1;
				}

				.select-ioc {
					width: 22rpx;
					height: 22rpx;
				}
			}

			.right-textarea {
				position: relative;
				border: 1px solid #E6E6E6;
				border-radius: 10rpx;
				flex: 1;
				padding: 16rpx 24rpx;

				.textarea {
					width: 100%;
					height: 190rpx;
					font-size: 28rpx;
				}

				.text-num {
					position: absolute;
					bottom: 12rpx;
					right: 12rpx;
					font-size: 28rpx;
					color: #999999;

				}
			}

			.right-images {
				display: flex;
				flex-wrap: wrap;

				.image-item {
					position: relative;
					width: 144rpx;
					height: 156rpx;
					border-radius: 16rpx;

					.select-ioc {
						width: 100%;
						height: 100%;
					}

					.image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
			}
		}

		.form-item:last-child {
			border-bottom: none;
		}
	}


	.upload-images {
		margin-top: 10rpx;
		position: relative;
		flex-direction: column;
		display: flex;
		background-color: #ffffff;
		padding: 0rpx 30rpx 40rpx;

		.image-title {
			font-size: 28rpx;
			color: #333333;
			line-height: 80rpx;
		}

		.scroll-view {
			white-space: nowrap
		}

		.image-list {
			display: inline-block;
			white-space: nowrap;

			.image-item {
				position: relative;
				display: inline-block;
				width: 144rpx;
				height: 156rpx;
				border-radius: 16rpx;
				margin-right: 40rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

			}

			.image-item:last-child {
				margin-right: 0;
			}
		}
	}

	.address-view {
		display: flex;
		flex-direction: column;
		padding: 0rpx 30rpx 40rpx;
		background-color: #ffffff;
		margin-top: 10rpx;

		.address-title {
			font-size: 28rpx;
			color: #333333;
			line-height: 80rpx;
		}


		.address-info {

			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background: #FAFAFA;
			border-radius: 12rpx;
			padding: 24rpx 30rpx;

			.address-text {
				font-size: 28rpx;
				color: #333333;
				padding: 4rpx 0;
			}

		}
	}

	.text-view {
		display: flex;
		flex-direction: column;
		padding: 0rpx 30rpx 40rpx;
		background-color: #ffffff;
		margin-top: 10rpx;


		.text-title-line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text-title {
				font-size: 28rpx;
				color: #333333;
				line-height: 80rpx;
			}

			.text-tips {
				font-size: 24rpx;
				color: #333333;
			}
		}


		.text-info {

			display: flex;
			margin-bottom: 20rpx;
			background: #FAFAFA;
			border-radius: 12rpx;
			padding: 24rpx 30rpx;
			min-height: 136rpx;

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.text {
				font-size: 28rpx;
				color: #333333;
				padding: 4rpx 0;
			}

			.copy {
				width: 30rpx;
				height: 30rpx;
				margin-top: auto;
				margin-bottom: auto;
				margin-left: 30rpx;
			}

		}
	}

	.cost-view {
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx;

		.cost-title {
			display: flex;
			align-items: center;
			height: 116rpx;
			border-bottom: 1px solid #E5E5E5;

			.text {
				font-size: 28rpx;
				color: #333333;
				margin-right: 20rpx;
			}

			.fee {
				font-size: 28rpx;
				color: #333333;
				margin-left: auto;
				margin-right: 4rpx;
			}
		}

		.cost-col {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 50rpx;
			padding-top: 10rpx;

			.code-img {
				width: 140rpx;
				height: 140rpx;
				border: 1px solid #E6E6E6;
				border-radius: 10rpx;
				padding: 10rpx;
				margin: 30rpx auto 20rpx;
			}

			.text {
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
			}
		}

		.cost-row {
			display: flex;
			padding: 20rpx 0;

			.label {
				line-height: 60rpx;
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}

			.image-view {
				width: 144rpx;
				height: 156rpx;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

			}
		}

		.back-yundan {
			display: flex;
			flex-direction: column;
			border-top: 1px solid #E5E5E5;

			.title {
				line-height: 80rpx;
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}

			.text-info {

				display: flex;
				margin-bottom: 20rpx;
				background: #FAFAFA;
				border-radius: 12rpx;
				padding: 24rpx 30rpx;
				min-height: 136rpx;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.text {
					font-size: 28rpx;
					color: #333333;
					padding: 4rpx 0;
				}

				.copy {
					width: 30rpx;
					height: 30rpx;
					margin-top: auto;
					margin-bottom: auto;
					margin-left: 30rpx;
				}

			}
		}

		.pingjia {
			display: flex;
			height: 116rpx;
			align-items: center;
			border-top: 1px solid #E5E5E5;

			.label {
				line-height: 116rpx;
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}
		}
	}

	.btn-view-pla {
		width: 100%;
		height: 130rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		box-sizing: content-box;
	}

	.btn-view {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 690rpx;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 130rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		background-color: #ffffff;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.btn {
			width: auto;
			height: 74rpx;
			padding: 0 40rpx;
			font-size: 28rpx;
			border: 1px solid #55C29A;
			margin-left: 40rpx;
		}

		.btn-01 {
			border: 1px solid #cccccc;
			background: #ffffff;
			color: #333333;
		}

		.btn:first-child {
			margin-left: 0;
		}
	}
</style>